<template>
	<view>

		<view class="history">
			<MyChart ref="myChart"></MyChart>
			<view>
				<u-calendar v-model="showCalendar" :mode="mode" @change="change"></u-calendar>
				<u-cell-item icon="calendar-fill" title="选择日期" @click="showCalendar=!showCalendar" :arrow="false">
					<span slot="right-icon">
						{{currentDate}}
					</span></u-cell-item>
			</view>
			<u-cell-item icon="warning-fill" title="查看历史警告" @click="toWarnList" :arrow="false"></u-cell-item>
		</view>

		<Common></Common>
	</view>

</template>

<script>
	import Common from "../../components/Common.vue"
	import MyChart from "../../components/MyChart.vue"
	export default {
		components: {
			Common,
			MyChart
		},
		data() {
			return {
				showCalendar: false,
				mode: 'date',
				currentDate: this.getCurrentDate()
			}
		},
		methods: {
			getCurrentDate(date) {

				let currentDate;
				if (date == null) {
					currentDate = new Date();
				} else {
					currentDate = date
				}


				const year = currentDate.getFullYear();
				const month = (currentDate.getMonth() + 1).toString().padStart(2, '0');
				const day = currentDate.getDate().toString().padStart(2, '0');

				const formattedDate = `${year}-${month}-${day}`;
				return formattedDate;
			},
			toWarnList() {

				uni.navigateTo({
					url: '/pages/warnList/warnList'
				});
			},
			change(e) {
				const customDate = new Date(e.year, e.month - 1, e.day);

				this.currentDate = this.getCurrentDate(customDate)
				
				

				//触发子组件方法
				this.$refs.myChart.getDateByDate(customDate)

			}
		}
	}
</script>

<style scoped>
	.history {
		width: 100%;
		height: 500px;
	}
</style>